<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia';
import { requestSynthesizeSearchResult } from '../../../utils/axiosURL'
import useSearchHistory from '../../../store/searchHistory';
import defaultImg from "../../../assets/logo.png";

// 请求关键字
const { keyword_Store } = storeToRefs(useSearchHistory())
// 存储专辑相关数据
let saveAlbumData = ref<any>([])
// 专辑总数
let albumCount = ref<number>(0)
// 请求专辑所有评论的页码
let allCommentPage = ref<any>(1)
onMounted(() => {
    requestSynthesizeSearchResultFn()
})
// 请求专辑数据
const requestSynthesizeSearchResultFn = () => {
    requestSynthesizeSearchResult(keyword_Store.value, 10, 30, allCommentPage.value).then((data: any) => {
        saveAlbumData.value = data.result.albums
        albumCount.value = data.result.albumCount
    }).catch(_ => { })
}
// 注册局部自定义指令
const vLazy = {
    mounted(el: HTMLImageElement, binding: any) {
        // el表示使用指令的DOM元素
        // bindings表示指令相关的信息是一个对象 如v-lazy="xxx",bindling即是xxx对应的内容
        // 指令的功能：实现图片的懒加载
        // 1、监听图片是否进入可视区
        const observer = new IntersectionObserver(([{ isIntersecting }]) => {
            // true；进入可视区域，false：未进入可视区域
            if (isIntersecting) {
                // 1、给图片的src属性赋值图片的地址
                el.src = binding.value
                // 2、取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
                observer.unobserve(el)
                // 3、加载的图片失败了，显示默认的图片地址
                el.onerror = () => {
                    el.src = defaultImg
                }
            }
        }, { threshold: 0 })
        observer.observe(el)
    },
};
const changePages = () => {
    requestSynthesizeSearchResultFn()
}

</script>


<template>
    <div class="albumWrap">
        <div class="albumItems" v-for="item in saveAlbumData" v-if="saveAlbumData.length">
            <RouterLink
                :to="{ path: `/AlbumDetail/${item.id}`, query: { url: item.picUrl, name: item.name, time: item.publishTime, singerName: item.artist.name } }">
                <div class="leftImg">
                    <img v-lazy="item.picUrl" alt="">
                    <div class="pseudo">
                        <div class="pseudo_cir"></div>
                    </div>
                </div>
                <div class="rightDesc">
                    <div class="albumName">{{ item.name }}</div>
                    <div class="albumAuthor">{{ item.artists[0].name }}</div>
                </div>
            </RouterLink>
        </div>
        <AlibumListSkeleton v-else v-for="item in 10" />
        <div class="paging">
            <el-pagination small background layout="prev, pager, next" :total="albumCount"
                v-model:current-page="allCommentPage" @current-change="changePages" />
        </div>
    </div>
</template>


<style lang="scss" scoped>
.albumWrap {
    width: 100%;

    .albumItems {
        width: 100%;
        height: 85px;
        border-radius: 6px;
        overflow: hidden;

        a {
            display: flex;
            width: 100%;
            height: 100%;

            .leftImg {
                display: flex;
                align-items: center;
                width: 100px;
                height: 85px;
                padding-left: 30px;

                img {
                    flex-basis: 60px;
                    width: 60px;
                    height: 60px;
                    border-radius: 6px;
                }

                .pseudo {
                    position: relative;
                    flex: 1;
                    height: 100%;

                    .pseudo_cir {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        overflow: hidden;

                        &::after {
                            position: absolute;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            left: -75px;
                            margin: auto;
                            content: "";
                            width: 60px;
                            height: 60px;
                            background:
                                repeating-radial-gradient(#252525 6px,
                                    #000 10px);
                            border-radius: 50%;
                        }
                    }

                    &::before {
                        z-index: 1;
                        content: "";
                        position: absolute;
                        top: 16px;
                        left: 0;
                        width: 0;
                        height: 20%;
                        border-style: solid solid solid solid;
                        border-width: 4px 0px 4px 4px;
                        border-color: rgba(240, 240, 241, 0.28) transparent transparent rgba(240, 240, 241, 0.28);
                        border-radius: 4px;
                    }

                    &::after {
                        content: "";
                        position: absolute;
                        bottom: 16px;
                        left: 0;
                        width: 0;
                        height: 20%;
                        border-style: solid solid solid solid;
                        border-width: 4px 0px 4px 4px;
                        border-color: transparent transparent rgba(240, 240, 241, 0.28) rgba(240, 240, 241, 0.28);
                        border-radius: 4px;
                    }
                }
            }

            .rightDesc {
                display: flex;
                flex: 1;
                align-items: center;

                .albumName {
                    width: 50%;
                    font-size: $font-size-sm;
                    font-family: $activeTextFont;
                }

                .albumAuthor {
                    width: 50%;
                    font-size: $font-size-sm;
                    font-family: $activeTextFont;
                }
            }

            &:nth-child(even) {
                background-color: rgb(250, 250, 250);
            }

            &:hover {
                background-color: rgb(242, 242, 243);
            }
        }
    }

    .paging {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 50px;

        :deep(.number) {
            border-radius: 4px;
            font-family: none;
            font-family: $textFont;
            background-color: transparent;
            border: 1px solid $lineColor;

            &:hover {
                color: $font_main_color;
                background-color: $BK_GRAY;
            }
        }

        :deep(.is-active) {
            background-color: $theme-red !important;
            border-radius: 4px;

            &:hover {
                color: $theme-white;
                background-color: $theme-red;
            }
        }

        :deep(.btn-prev),
        :deep(.btn-next) {
            border-radius: 4px;
            border: 1px solid $lineColor;
            background-color: transparent;

            &:hover {
                color: $font_red_color;
                background-color: $BK_GRAY;
            }
        }

        :deep(.more) {
            border-radius: 4px;
            border: 1px solid $lineColor;
            background-color: transparent;

            &:hover {
                color: $font_red_color;
                background-color: $BK_GRAY;
            }
        }
    }
}
</style>